<template>
    <div class="application">
        <div class="group">
            <div class="title-info">
                <span>1、添加应用，申请APP KEY</span> 
            </div>
            <div class="content-main">
                <table class="text-center">
                    <thead>
                        <tr>
                            <td>应用名称</td>
                            <td>包名/网址</td>
                            <td>APP KEY</td>
                            <td>平台</td>
                            <td>操作</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>ios</td>
                            <td>and</td>
                            <td>dc150dd9210fab1a9eb174286d503dbb</td>
                            <td>
                                <div class="platform"> 
                                    <p>IOS</p>
                                    <p>未接入</p>    
                                </div>
                                 <div class="platform"> 
                                    <p>Android</p>
                                    <p>未接入</p>    
                                </div>
                            </td>
                            <td>
                                <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                                    <i class="el-icon-edit cursor"></i>
                                </el-tooltip>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="group">
            <div class="title-info">
                <span>2、选择平台，集成SDK</span> 
            </div>
            <div class="content-sdk clear-both">
                <div class="sdk-box">
                    <div class="down-page">
                        <div class="icon-div">
                            <div class="sdkicon ios-icon"></div>
                            <div class="text-name">iOS-SDK包</div>
                        </div>
                        <div class="div-btn text-center">
                            <el-button class="btn">下载</el-button>
                        </div>
                    </div>
                    <div class="down-page">
                        <div class="icon-div">
                            <div class="sdkicon android-icon"></div>
                            <div class="text-name">Android-SDK包</div>
                        </div>
                        <div class="div-btn text-center">
                            <el-button class="btn">下载</el-button>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>
</template>

<script>
	import * as api from './../../api/api';
    import Vue from 'vue';
export default {
    data(){
        return {
            groupList:[{
                select:'',
                app_key:'',
                master_sercet:'',
            }],
            optionsClass: [{
                value: '极光推送',
                label: '极光推送'
            }],
            addTbnShow:true,
        }
    },
    mounted(){
        
    },
    computed: {

    },
    methods: {
        addSet(){
            if(this.groupList.length<3){
                this.groupList.push({select:'', app_key:'', master_sercet:'',});
            }
            if(this.groupList.length==3){
                this.addTbnShow=false;
            }
        },
        deleteSetList(index){
            if(this.groupList.length>1){
                this.addTbnShow=true;
               Vue.delete(this.groupList, index);
            }   
        },
    }
    
}
</script>

<style lang="less" scoped>
.application{
    background:#fff;
     
    .group{
        margin-bottom:30px;
        .title-info{
            padding:20px;
            font-size:14px;
            color: #666;
            border-bottom:1px solid #ddd;
            .add-btn{
                padding: 6px 12px;
            }
        }
        .content-main{
            table{
                width: 100%;
                height: auto;
                overflow: hidden;
                tr{
                    height: 60px;
                }
                tbody{
                    tr{
                        font-size: 13px;
                        font-weight: 400;
                        color: #666; 
                        .platform{
                            display:inline-block;
                        }
                    }
                    
                }
            }
        }
        .content-sdk{
            padding:30px;
            .sdk-box{
                width:100%;
                
                .down-page{
                    float:left;
                    width: 200px;
                    height: 234px;
                    border: 1px solid #efefef;
                    border-radius: 3px;
                    position: relative;
                    margin-right:20px;
                    padding-top: 50px;
                    .icon-div{
                        padding-left:30px;
                        div{
                            display:inline-block;
                        }
                        .sdkicon{
                            width: 40px;
                            height: 40px;
                            background-size: 128px 256px;
                            background-image: url('./../../assets/img/sdk_icon.png');
                            vertical-align: middle;
                        }
                        .ios-icon{
                            background-position: -2px -48px;
                        }
                        .android-icon{
                            background-position: -2px -94px;    
                        }
                        .text-name{
                            padding-top: 6px;
                            padding-left: 5px;
                            color:#666;
                            font-size:14px;
                        }
                    }
                    .div-btn{
                        margin-top:30px;
                        .btn{
                            padding:6px 15px;
                            background-color: #ec5463;
                            color:#fff;
                        }
                    }
                }
            }
        }
    }
    
}
</style>
